<template>
  <div class="container">
    <aside class="side">
      <yAside />
    </aside>
    <section class="section">
      <flow-list v-if="showList" />
      <flow-editor :flowId="flowId" :bpmnXML="bpmnXML" v-else />
    </section>
  </div>
</template>

<script>
import FlowModelEditor from "./flowModelEditor/index.vue";
import FlowModelList from "./flowModelList/index.vue";
import yAside from "./flowModelList/components/aside/aside.vue";
import { mapActions } from "vuex";

export default {
  name: "index",
  data() {
    return {
      showList: true,
      flowId: "",
      bpmnXML: "",
    };
  },
  methods: {
    ...mapActions("flowDesignStore", ["getBpmnXML"]),
    async toggleList(options) {
      // 关闭bpmn设计器，返回列表
      this.bpmnXML = null;
      this.flowId = "";
      // 编辑
      if (options.id) {
        const rst = await this.getBpmnXML({
          id: options.id,
        });
        if (rst.status) {
          this.flowId = options.id;
          this.bpmnXML = rst.data.data;
        } else {
          this.$message({
            type: "warning",
            message: rst.data.message,
          });
          return;
        }
      }
      // 导入
      if (options.bpmnXML) {
        this.bpmnXML = { content: options.bpmnXML };
      }
      this.showList = options.flag;
    },
  },
  components: {
    "flow-list": FlowModelList,
    "flow-editor": FlowModelEditor,
    yAside,
  },
  provide() {
    return {
      toggleList: this.toggleList,
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  .section {
    display: flex;
    flex: auto;
    overflow-y: auto;
    flex-direction: column;
  }
}
</style>
